<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>传智健康</title>
        <meta name="description" content="传智健康">
        <meta name="keywords" content="传智健康">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
        <!-- 引入组件库 -->
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script src="../js/vue.js"></script>
        <script src="../plugins/elementui/index.js"></script>
        <script src="../js/axios-0.18.0.js"></script>
        <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=z8NefZNzxVVDlV9uzd0CjD6tkl7AB9wA"></script>
        <style>

            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }

            #map {
                margin-top: 20px;
                height: 700px;
            }
            .datatable {
                position: relative;
                box-sizing: border-box;
                -webkit-box-flex: 1;
                width: 100%;
                max-width: 100%;
                font-size: 14px;
                color: rgb(96, 98, 102);
                overflow: hidden;
                flex: 1 1 0%;
            }
            .datatable td, .datatable th {
                padding: 12px 0;
                min-width: 0;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                text-overflow: ellipsis;
                vertical-align: middle;
                position: relative;
                text-align: left;
            }
        </style>
    </head>
    <body class="hold-transition">
        <div id="app">
            <div class="content-header">
                <h1>体检机构管理<small>体检机构地址管理</small></h1>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>体检机构管理</el-breadcrumb-item>
                    <el-breadcrumb-item>体检机构地址管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="app-container">
                <div class="box">
                    <div class="filter-container">
                        <el-input placeholder="体检机构名/体检机构" v-model="pagination.queryString" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"></el-input>
                        <el-button @click="handleCurrentChange(1)" class="dalfBut">查询</el-button>
                        <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
                    </div>
                    <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                        <el-table-column type="index" align="center" label="序号"></el-table-column>
                        <el-table-column prop="name" label="体检机构名" align="center"></el-table-column>
                        <el-table-column prop="telephone" label="联系电话" align="center"></el-table-column>
                        <el-table-column prop="lngAndLat" label="经纬度" align="center"></el-table-column>
                        <el-table-column prop="img" label="机构图片" align="center"></el-table-column>
                        <el-table-column prop="address" label="详细地址" align="center"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                            class="pagiantion"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage"
                            :page-size="pagination.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="pagination.total">
                        </el-pagination>
                    </div>
                    <!-- 新增标签弹层 -->
                    <div class="add-form">
                        <el-dialog title="新增体检机构地址" :visible.sync="dialogFormVisible">
                            <template>
                                <el-tabs v-model="activeName" type="card">
                                    <el-tab-pane label="基本信息" name="first">
                                        <el-form label-position="right" label-width="100px">
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-form-item label="体检机构名">
                                                        <el-input v-model="formData.name"/>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="联系电话">
                                                        <el-input v-model="formData.telephone"/>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="24">
                                                    <el-form-item label="上传图片">
                                                        <el-upload
                                                                class="avatar-uploader"
                                                                action="/address/upload.do"
                                                                :auto-upload="autoUpload"
                                                                name="imgFile"
                                                                :show-file-list="false"
                                                                :on-success="handleAvatarSuccess"
                                                                :before-upload="beforeAvatarUpload">
                                                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                        </el-upload>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-form-item label="经纬度">
                                                        <el-input v-model="formData.lngAndLat" :disabled="true"/>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="24">
                                                     <el-form-item label="设备地址" prop="address" label-width="100px" style="position:relative">
                                                            <el-input
                                                                id="myInput"
                                                                v-model="formData.address"
                                                                autocomplete="off"
                                                                disabled
                                                                placeholder="请输入设备安装地址"
                                                            ></el-input>
                                                           <el-button type="primary" round @click="getGpsList" icon="el-icon-location">设置定位</el-button>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary" @click="handleAdd()">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>

                    <el-dialog title="地图定位" :visible.sync="mapequipmentDialog" width="930px">
                        <!--<div class="selectAddress">
                             <p>
                              <img src="@/assets/images/location_green.png">
                              <input class="deviceAddressInput" type="text" value v-model="addobjequipment.dizhiInput">
                              <el-input type="text" class="deviceAddressInput"></el-input>
                            </p>
                          &lt;!&ndash;  <p class="deviceAddressText">{{dizhiMap}}</p>&ndash;&gt;
                        </div>-->

                        <el-input v-model="inputAddress" placeholder="输入搜索地址" style="width: 70%"></el-input><el-button icon="el-icon-search" @click="createMapSearch" circle></el-button>

                        <div id="map"></div>
                        <span slot="footer" class="dialog-footer">
                          <el-button @click="mapequipmentDialog = false">取 消</el-button>
                          <el-button type="primary" @click="getClick">确 定</el-button>
                        </span>
                    </el-dialog>


                    <!-- 编辑标签弹层 -->
                    <div class="add-form">
                        <el-dialog title="编辑体检机构地址" :visible.sync="dialogFormVisible4Edit">
                            <template>
                                <el-tabs v-model="activeName" type="card">
                                    <el-tab-pane label="基本信息" name="first">
                                        <el-form label-position="right" label-width="100px">
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-form-item label="体检机构名">
                                                        <el-input v-model="formData.name"/>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="联系电话">
                                                        <el-input v-model="formData.telephone"/>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="24">
                                                    <el-form-item label="上传图片">
                                                        <el-upload
                                                                class="avatar-uploader"
                                                                action="/address/upload.do"
                                                                :auto-upload="autoUpload"
                                                                name="imgFile"
                                                                :show-file-list="false"
                                                                :on-success="handleAvatarSuccess"
                                                                :before-upload="beforeAvatarUpload">
                                                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                        </el-upload>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-form-item label="经纬度">
                                                        <el-input v-model="formData.lngAndLat" :disabled="true"/>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="24">
                                                    <el-form-item label="设备地址" prop="address" label-width="100px" style="position:relative">
                                                        <el-input
                                                                id="myInput"
                                                                v-model="formData.address"
                                                                autocomplete="off"
                                                                disabled
                                                                placeholder="请输入设备安装地址"
                                                        ></el-input>
                                                        <el-button type="primary" round @click="getGpsList" icon="el-icon-location">设置定位</el-button>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                                <el-button type="primary" @click="handleEdit()">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>

                    <!-- 编辑标签弹层 -->
                    <div class="add-form">
                        <el-dialog title="该地址被预约信息" :visible.sync="dialogFormVisible4delete">
                            <template>
                                <el-table
                                        :data="deleteData"
                                        style="width: 100%"
                                        :row-class-name="tableRowClassName"
                                         >
                                    <el-table-column
                                            prop="memberName"
                                            label="会员姓名"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="orderDate"
                                            label="预约日期"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="orderType"
                                            label="预约方式"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="orderStatus"
                                            label="预约状态"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="setmealName"
                                            label="预约套餐名称"
                                            width="180">
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-dialog>
                    </div>
                </div>
            </div>
        </div>
    </body>

    <script>
        var vue = new Vue({
            el: '#app',
            data:{
                //地图
                inputFlag:false,//控制地图
                inputAddress:'',//搜索景点
                mapequipmentDialog:false,
                LongitudeANDlatitude:{
                    lngg:0,
                    latt:0,
                    address:'',
                },
                autoUpload: true,//自动上传
                imageUrl: null,//模型数据，用于上传图片完成后图片预览
                activeName:'first',//添加/编辑窗口Tab标签名称
                pagination: {//分页相关属性
                    currentPage: 1,
                    pageSize:10,
                    total:100,
                    queryString:null,
                },
                deleteData:[],//删除表单数据
                dataList: [],//列表数据
                formData: {},//表单数据
                tableData:[],//新增和编辑表单中对应的检查项列表数据
                checkitemIds:[],//新增和编辑表单中检查项对应的复选框，基于双向绑定可以进行回显和数据提交
                dialogFormVisible: false,//控制添加窗口显示/隐藏
                dialogFormVisible4Edit:false,//控制编辑窗口显示/隐藏
                dialogFormVisible4delete:false//控制删除失败时跳出的窗口
            },
            created() {
                this.findPage();
            },

            methods: {

                //景点查找
                createMapSearch(){

                    this.inputFlag = true;
                    this.createMaps();
                },


                getGpsList(){
                    this.mapequipmentDialog = true;
                    this.createMaps();
                },

                //通过指定的毫秒数调用方法(可以快速加载方法,否则第一次加载不出来)
                createMaps(){
                    setTimeout(
                        ()=>{
                        this.createMap()},0);
                },

                //创建地图实例
                createMap() {
                    // 创建Map实例
                    var that = this;
                    var map = new BMap.Map("map");
                    var geolocation = new BMap.Geolocation();
                    //调用百度地图api 中的获取当前位置接口
                    geolocation.getCurrentPosition(function (r) {
                        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                            //获取当前位置经纬度
                            let myGeo = new BMap.Geocoder();
                            myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function (result) {
                                if (result) {
                                    console.log(result);
                                    //设置地图初始化位置,根据此时是否有经纬度传过来
                                    if( that.formData.lngAndLat != null){
                                        map.centerAndZoom(new BMap.Point(that.LongitudeANDlatitude.lngg,that.LongitudeANDlatitude.latt), 11);
                                        var marker = new BMap.Marker(new BMap.Point(that.LongitudeANDlatitude.lngg,that.LongitudeANDlatitude.latt));
                                    }else {
                                        // 初始化地图,设置中心点坐标和地图级别
                                        map.centerAndZoom(new BMap.Point(result.point.lng, result.point.lat), 11);//设置中心点
                                        var marker = new BMap.Marker(new BMap.Point(result.point.lng, result.point.lat));
                                    }

                                    map.setCurrentCity("北京");        //由于有3D图，需要设置城市哦
                                    //开启鼠标滚轮缩放,默认关闭
                                    map.enableScrollWheelZoom(false);
                                    //添加缩略图控件
                                    map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
                                    //添加缩放平移控件
                                    map.addControl(new BMap.NavigationControl());
                                    //添加比例尺控件
                                    map.addControl(new BMap.ScaleControl());
                                    //添加地图类型控件
                                    map.addControl(new BMap.MapTypeControl());

                                    if(that.inputFlag === true){
                                        var local = new BMap.LocalSearch(map, {
                                            renderOptions:{map: map}
                                        });
                                        local.search(that.inputAddress);
                                    }


                                    //把标注添加到地图上
                                    map.addOverlay(marker);
                                    var geoc = new BMap.Geocoder();

                                    map.addEventListener('click', function (e) {

                                        var pt = e.point;
                                        geoc.getLocation(pt, function(rs){
                                            //addressComponents对象可以获取到详细的地址信息
                                            var addComp = rs.addressComponents;
                                            var site = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
                                            //将对应的HTML元素设置值
                                            that.LongitudeANDlatitude.lngg = pt.lng;
                                            that.LongitudeANDlatitude.latt = pt.lat;
                                            that.LongitudeANDlatitude.address = site;
                                            alert('点击位置经纬度：' + e.point.lng + ',' + e.point.lat);
                                        });
                                    });
                                }
                            });
                        }
                    });
                },

                //地图的确定,给经纬度和地址赋值
                getClick(){
                    this.mapequipmentDialog = false;
                    this.formData.lngAndLat = this.LongitudeANDlatitude.lngg +","+ this.LongitudeANDlatitude.latt;
                    this.formData.address = this.LongitudeANDlatitude.address;
                },

                //上传图片之前执行
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isJPG) {
                        this.$message.error('上传套餐图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传套餐图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },

                //下载成功后
                //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
                handleAvatarSuccess(response , file){
                    //从后台服务器传来的响应数据为当前该图片在七牛云中的名字,返回到前端页面,是当前页面显示图片
                    this.imageUrl = "http://qhvo8vt0g.hd-bkt.clouddn.com/"+response.data;

                    this.$message({

                        type: response.flag ? 'success' : 'error',
                        message: response.message
                    });

                    //把该图片的名字赋值给当前表单中
                    //设置模型数据（图片名称），后续提交ajax请求时会提交到后台最终保存到数据库
                    this.formData.img = response.data;
                },


                //添加
                handleAdd () {
                    //alert(this.checkitemIds);
                    //发送ajax请求，将表单数据提交到后台进行处理
                    axios.post("/address/add.do",this.formData).then((res) => {
                        //关闭新增窗口
                        this.dialogFormVisible = false;
                        if(res.data.flag){
                            //操作成功
                            this.$message({
                                type:'success',
                                message:res.data.message
                            });
                        }else{
                            //操作失败
                            this.$message.error(res.data.message);
                        }
                    }).finally(() => {
                        //重新进行分页查询
                        this.findPage();
                    });
                },


                //分页查询
                findPage() {
                    //封装分页参数
                    var param = {
                        currentPage:this.pagination.currentPage,
                        pageSize:this.pagination.pageSize,
                        queryString:this.pagination.queryString
                    };
                    //发送ajax请求，提交分页相关参数
                    axios.post("/address/findPage.do",param).then((res) => {
                        //为VUE对象的模型数据赋值，基于双向数据绑定展示到页面
                        this.dataList = res.data.rows;//当前页展示的数据集合
                        this.pagination.total = res.data.total;//总数据量
                    });
                },

                  //编辑
                  handleEdit() {
                      //发送ajax请求，将修改后的表单数据（检查组基本信息、勾选的检查项）提交到后台进行处理
                      axios.post("/address/edit.do",this.formData).then((res) => {
                          //关闭编辑窗口
                          this.dialogFormVisible4Edit = false;
                          if(res.data.flag){
                              //操作成功
                              this.$message({
                                  type:'success',
                                  message:res.data.message
                              });
                          }else{
                              //操作失败
                              this.$message.error(res.data.message);
                          }
                      }).finally(() =>{
                          this.findPage();
                      });
                  },

                // 重置表单
                resetForm() {
                    this.formData = {};
                },
                // 弹出添加窗口
                handleCreate() {
                    this.resetForm();
                    this.dialogFormVisible = true;
                    //发送ajax请求，查询所有的检查项信息，转为json，赋值给tableData
                    this.activeName = 'first';//默认选中first对应的tab
                },
                // 弹出编辑窗口
                handleUpdate(row) {
                    this.resetForm();
                    //弹出编辑窗口
                    this.dialogFormVisible4Edit = true;
                    this.imageUrl = null;
                    this.activeName = 'first';

                    //请求当前数据的信息'
                    axios.get("/address/findById.do?id="+row.id)
                        .then((resp)=>{
                            if(resp.data.flag){
                                this.formData = resp.data.data;

                                //获取经纬度地址
                                if(this.formData.lngAndLat != null){
                                    alert(this.formData.lngAndLat);
                                    //切割经纬度地址
                                    var a = this.formData.lngAndLat;
                                    var spilts  = a.split(",");
                                    this.LongitudeANDlatitude.lngg = spilts[0];
                                    this.LongitudeANDlatitude.latt = spilts[1];
                                }

                                //给图片赋值
                                this.imageUrl = "http://qhvo8vt0g.hd-bkt.clouddn.com/"+this.formData.img;

                            }else {
                                this.$message.error(resp.data.message);
                            }

                        })
                },
                //切换页码
                handleCurrentChange(currentPage) {
                    //为模型数据赋值（当前页面）
                    this.pagination.currentPage = currentPage;
                    this.findPage();
                },

                //删除表单时
                tableRowClassName({row, rowIndex}) {
                    if (rowIndex === 1) {
                        return 'warning-row';
                    } else if (rowIndex === 3) {
                        return 'success-row';
                    }
                    return '';
                },


                // 删除
                handleDelete(row) {

                    this.$confirm("确认要删除嘛大胸弟",'提示',{
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(()=>{

                        axios.get("/address/delete.do?id="+row.id+"&img="+row.img)
                            .then((resp)=>{
                                if(resp.data.flag){
                                    this.$message.success(resp.data.message);
                                }else {

                                    this.$message.error(resp.data.message);
                                    //打开窗口
                                    this.dialogFormVisible4delete = true;
                                    this.deleteData = resp.data.data;

                                }
                            })

                    }).catch(()=>{
                        this.$message({
                            type:'warning',
                            message:"已经取消删除"
                        });
                    }).finally(()=>{
                        this.findPage();
                    })
                }
            }
        })
    </script>
</html>
